.user-info-page {
  display: flex;
  align-items: flex-start;

  .user-info-page-side {
    background-color: plv(bg-2);
    width: 400px;
    position: sticky;

    .user-info-page-avatar {
      height: 2.5em;
      width: 2.5em;
      font-size: 2.5em;
      box-sizing: border-box;
      background-color: plv(secondary-2);
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .user-info-page-side-card:first-child {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .user-info-page-name {
      font-weight: 600;
      font-size: 1.5em;
      color: plv(text-1);
      margin: 0.5em 0;
    }

    .user-info-page-postn {
      color: plv(text-2);
    }

    .user-info-page-information {

      & > div {
        line-height: 2;
        color: plv(text-2);
        @include comp(icon) {
          vertical-align: -0.1em;
          color: plv(text-4);
          margin-right: 0.5em;
        }
      }
    }

    .user-info-page-side-card {
      display: flex;
      flex-direction: column;
      align-items: stretch;

      .user-info-page-side-card-title {
        color: plv(text-1);
      }

      & + .user-info-page-side-card {
        border-top: solid 1px plv(border-color);
      }
    }

    .user-info-page-side-tag-list {
      & > div {
        display: inline-block;
        font-size: 0.8em;
        padding: 3px 6px;
        background-color: plv(secondary-2);
        margin-right: 1em;
        margin-bottom: 0.5em;
        word-break: break-word;

        @include comp(icon) {
          vertical-align: -0.1em;
        }

        &:last-child {
          background-color: transparent;
          border: solid 1px plv(border-color);
        }
      }
    }

    .user-info-page-team-list {
      display: flex;
      flex-direction: column;
      align-items: stretch;

      .project-item {
        padding: 0;
        display: flex;
        align-items: center;

        & > div:last-child {
          & > div:first-child {
            color: plv(text-1);
          }

          & > div:last-child {
            color: plv(text-3);
            font-size: 0.8em;
          }
        }
      }

      img {
        width: 3em;
        height: 3em;
        object-fit: cover;
        border-radius: 99px;
      }
    }
  }

  .user-info-page-content {
    flex: 1;
    background-color: plv(bg-2);

    .user-info-article-item {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      border-bottom: solid 1px plv(border-color);

      .user-info-article-item-title {
        font-size: 1.25em;
        font-weight: 600;
        color: plv(text-1);
        display: flex;
        align-items: center;

        & > img {
          height: 1.5em;
          width: 1.5em;
          object-fit: cover;
          margin-right: 0.5em;
        }
      }

      .user-info-article-item-tags {
        display: flex;
        align-items: center;

        & > div {
          display: inline-block;
          font-size: 0.8em;
          padding: 3px 6px;
          background-color: plv(secondary-2);
          margin-right: 1em;
          margin-bottom: 0.5em;
          word-break: break-word;
        }
      }

      .user-info-article-item-user-information {
        display: flex;
        align-items: center;

        & > img {
          height: 1.8em;
          width: 1.8em;
          object-fit: cover;
          border-radius: 99px;
        }

        & > * + * {
          margin-left: 0.5em;
        }

        .user-info-article-item-user-name {
          color: plv(primary-6);
        }

        .user-info-article-item-user-datetime {
          color: plv(text-3);
        }
      }

      .user-info-article-item-operation {
        display: flex;
        align-items: center;

        & > div {
          display: flex;
          align-items: center;
          margin-right: 1em;
          @include comp(icon) {
            margin-right: 0.5em;
          }
        }
      }
    }

    .user-info-project-item {
      border: solid 1px plv(border-color);
      padding-top: 3.5em;

      .user-info-project-item-title {
        display: flex;
        align-items: center;
        position: absolute;
        top: -3em;
        left: -2.5em;

        img {
          height: 2em;
          width: 2em;
          margin-right: 0.5em;
        }

        span {
          color: plv(text-1);
          font-weight: 600;
          font-size: 1.25em;
        }
      }

      .user-info-project-item-data {
        display: flex;
        align-items: center;
        justify-content: space-evenly;


        & > div {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: relative;

          & > span {
            display: flex;
            align-items: flex-end;

            & + span {
              margin-top: 0.5em;
            }

            .user-info-project-item-data-title {
              color: plv(text-3);
            }

            &:last-child {
              color: plv(text-1);
              font-size: 1.5em;
            }
          }
        }

        .user-info-project-item-data-unit {
          font-size: 0.75em;
          margin-left: 0.25em;
          color: plv(text-3);
        }
      }

      .user-info-project-item-operation {
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: solid 1px plv(border-color);

        & > div {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 1em 0;
          color: plv(text-4);
          cursor: pointer;
          position: relative;

          &:hover {
            color: plv(primary-6);
          }

          & + div {
            &:before {
              content: '';
              position: absolute;
              left: -1px;
              top: 0.5em;
              bottom: 0.5em;
              width: 2px;
              background-color: plv(border-color);
              transform: scaleX(0.5);
            }
          }
        }
      }
    }
  }
}

.app-container {
  @include sizeMixin(app-container, ()) {
    .user-info-page {
      .user-info-page-side {
        margin-right: $margin;
        padding: $margin;
        border-radius: $border-radius;
        top: calc(var(--app-header) + #{$margin});

        .user-info-page-information {
          margin-top: $margin;
        }

        .user-info-page-side-card {
          padding: $margin 0;

          .user-info-page-side-card-title {
            margin-bottom: $margin;
          }

          &:last-child {
            padding-bottom: 0;
          }
        }

        .user-info-page-side-tag-list {
          & > div {
            border-radius: $border-radius;
          }
        }

        .user-info-page-team-list {
          .project-item {
            img {
              margin-right: $margin;
            }

            & + .project-item {
              margin-top: $margin;
            }
          }
        }
      }

      .user-info-page-content {
        border-radius: $border-radius;

        .tabs-header-list {
          padding-left: $margin;
        }

        .user-info-article-item {
          padding: $margin 0;

          & > * + * {
            margin-top: $margin;
          }

          .user-info-article-item-tags {
            & > div {
              border-radius: $border-radius
            }
          }
        }

        .user-info-project-item {
          border-radius: $border-radius;

          .user-info-project-item-data {
            margin: $margin 0;
          }
        }
      }
    }
  }
}
